<template>
  <div class="search-wrap"  ref="search_wrap">
    <div class="search" ref="search">
      <span class="search-icon"></span>
      <div class="search-text">超市会员商店优惠商品</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    scrollY: {
      type: Number,
      default: 0,
      timer: null
    },
    headerHeight: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isReachTop: false
    }
  },
  mounted () {
    // this.searchEl = this.$refs.search
    // this.offsetTop = this.searchEl.offsetTop
    // this.width = this.searchEl.clientWidth
    // this.height = this.searchEl.clientHeight
  },
  watch: {
    // scrollY (y) {
    //   if (y < 0) {
    //     if ((this.offsetTop + y) >= (this.headerHeight - this.height) / 2) {
    //       this.searchEl.style.top = this.offsetTop + y + 'px'
    //       this.searchEl.style.width = this.width + y + 'px'
    //     } else {
    //       this.searchEl.style.top = (this.headerHeight - this.height) / 2 + 'px'
    //       this.searchEl.style.width = 295 + 'px'
    //       this.isReachTop = true
    //     }
    //   } else {
    //     this.isReachTop = false
    //   }
    // }
  },
  beforeDestroy () {
    this.timer = null
  }
}
</script>
<style lang = 'scss' scoped>
.search-wrap {
  background: #fff;
  padding: 8px 18px 8px 18px;
  height: 32px;
  display: flex;
  justify-content: center;
  .search {
    height: 32px;
    width: 339px;
    background: #f5f5f5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    .search-icon {
      width: 44px;
    }
    .search-text {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #b7b7b7;
    }
  }
}
</style>
